<template>
  <div>
    <div>子组件</div>
    <p></p>
    <a-badge :count="count" :showZero="true">
      <a-avatar shape="square" size="large" />
    </a-badge>
    <p></p>
    <div v-if="isPublished">你能看见我吗</div>
  </div>
</template>

<script>
import Persion from "./Person";
export default {
  /**
   * 也可以直接简写为数组形式
   */
  // props:['props']
  props: {
    count: {
      type: Number,
      default: 0,
    },
    "is-published": Boolean,
    initialCounter: Object,
    /**
     *  自定义类型校验函数
     */
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ["success", "warning", "danger"].includes(value);
      },
    },
    /**
     * 函数类型的默认值
     */
    propG: {
      type: Function,
      // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
      default() {
        return "Default function";
      },
    },
    /**
     * Vue 将会通过 instanceof 来检查类型是否匹配
     */
    props: {
      author: Persion,
    },
  },
  computed: {
    // 该 prop 变更时计算属性也会自动更新
    normalizedSize() {
      return this.count + 1;
    },
  },
  data() {
    return {
      // prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性
      // 像下面这样做就使 prop 和后续更新无关了
      counter: this.initialCounter,
    };
  },
};
</script>

<style></style>
